<template>
  <el-dialog title="模型" v-model="show" width="1024px">
    <el-form ref="formRef" :model="data" label-position="right" label-width="110px">
      <jax-form-group v-model="data" :json="formJson" style="max-width: 512px"> </jax-form-group>

      <template v-if="data.dataType == 'ArrayData'">
        <ArrayData v-model="data.options" />
      </template>
      <template v-else-if="data.dataType == 'ObjectData'">
        <ObjectData v-model="data.options" />
      </template>

      <JsonEdit v-model="data.json" />
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import ArrayData from './ArrayData.vue'
import ObjectData from './ObjectData.vue'

const emits = defineEmits(['update:modelValue', 'update:data', 'submit'])
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  data: { type: Object, default: () => {} },
})

const formRef = ref()

const show = computed({
  get: () => props.modelValue,
  set: val => emits('update:modelValue', val),
})

const formJson = computed(() => {
  const required = true
  const miniInput = { style: 'width:100px' }

  const typeOptions = [
    { value: 'text', label: '文本框' },
    { value: 'ArrayData', label: '数组数据' },
    { value: 'ObjectData', label: '对象数据' },
    { value: 'number', label: '数字框' },
    { value: 'textarea', label: '多行文本框' },
    { value: 'upload-image', label: '图片上传' },
    { value: 'upload-file', label: '文件上传' },
    // { value: 'upload-video', label: '视频' },
    // { value: 'editor', label: '富文本编辑器' },
    { value: 'select', label: '下拉菜单' },
    { value: 'checkbox-group', label: '多选框' },
    { value: 'radio-group', label: '单选框' },
    { value: 'switch', label: '开关' },
    { value: 'datetime', label: '日期时间选择框' },
    { value: 'date-picker', label: '日期时间选择框(完整)' },
  ]

  const json = [
    { name: 'rank', label: '序号', type: 'number', tips: '（序号越小越靠前）', inputAttr: miniInput },
    { name: 'label', label: '标签', required },
    { name: 'name', label: '字段名' },
    { name: 'alias', label: '别名' },
    { name: 'required', label: '必填', type: 'switch' },
    { name: 'remark', label: '备注', type: 'textarea', inputAttr: { maxlength: null } },
    {
      name: 'dataType',
      label: '数据类型',
      type: 'select',
      options: typeOptions,
      required,
      inputOn: {
        change(val) {
          const { data } = props

          if (val == 'ArrayData') {
            if (data.options == undefined || !Array.isArray(data.options)) data.options = []
          } else if (val == 'ObjectData') {
            if (data.options == undefined) data.options = []
          }
        },
      },
    },
  ]

  return json
})

// 保存
const handleSubmit = () => {
  formRef.value.validate().then(() => {
    props.data.json = toJsonStr(props.data)

    emits('submit', props.data)
    show.value = false
  })
}

function toJsonStr(item) {
  return {
    ...item.json,
    name: item.name,
    label: item.label,
    remark: item.remark,
    alias: item.alias,
    dataType: item.dataType,
    required: item.required,
    options: item.options,
  }
}
</script>
<style lang="scss" scoped></style>
